{% extends 'layouts/base.html' %}
{% block content %}
<style>
    label.error {
        color: red;
        font-size: 16px;
        font-weight: normal;
        line-height: 1.4;
        margin-top: 0.5em;
        width: 100%;
        float: none;
    }
    .order_wrap .weui_cells_form .weui_cell .left_top_label_box{
        vertical-align: top;
    }
    body, html{width: 100%;height: 100%;margin:0;}
    *{
        margin: 0px;
        padding: 0px;
    }
    #l-map{height:627px;width:100%;display: block;}
    #r-result {width:100%; font-size:14px;line-height:20px;}  
    .am-search{
        padding: 7px 4%;
        width: 92%;
        position: absolute;
        top:10px;
        left: 0px;
        z-index: 9999;
    }
    .am-search .am-search-input{
        width: 100%;
        height: 45px;
        margin: 0 auto;
        line-height: 45px;
        background-color: #fff;
        display: -webkit-box;
        display: -webkit-flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        border-radius: 5px;
        -webkit-background-clip: padding-box;
        -moz-box-shadow: 2px 2px 10px #cccccc,2px 2px 10px #cccccc,2px 2px 10px #cccccc,2px 2px 10px #cccccc;
        -webkit-box-shadow: 2px 2px 10px #cccccc,2px 2px 10px #cccccc,2px 2px 10px #cccccc,2px 2px 10px #cccccc;
        box-shadow:2px 2px 10px #cccccc,2px 2px 10px #cccccc,2px 2px 10px #cccccc,2px 2px 10px #cccccc;
    } 
    .am-search .am-search-input .am-search-icon{
        width: auto;
        padding-left: 8px;
        display: block;
    }
    .am-search .am-search-input .am-search-icon i{
        margin-right: 5px;
        float: right;
    }
    .am-search .am-search-input .am-search-icon i:before{
        content: '';
        display: block;
        width: 21px;
        height: 21px;
        background: url({{config['application']['site']['assetsUri']}}front/images/search.png) no-repeat center center;
    }
    .am-search .am-search-input input{
        width: auto;
        text-align: left;
        -webkit-appearance: none;
        display: block;
        padding: 0;
        height: 29px;
        border: none;
        font-size: 16px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        color:#888888;
    }
    .am-search .am-search-input .am-search-clear{
        width: 34px;
        /*display: none;*/
    }
    .am-search .am-search-input .am-search-clear i{
    }
    .am-search .am-search-input .am-search-clear i:before{
        content: '';
        display: block;
        width: 34px;
        height: 34px;
        background: url({{config['application']['site']['assetsUri']}}front/images/clear.png) no-repeat center center;
    }
    .am-search .am-search-local{
        width: 50px;
        height: 29px;
        padding:0px 10px;
        overflow: hidden;
    }
    .am-search .am-search-local:before{
        content: '';
        float: left;
        height: 21px;
        border-left: 1px solid #cccccc;
        position: relative;
        left: -10px;
        top:5px;
    }
    .am-search .am-search-local p{
        font-size: 16px;
        width: 100%;
        line-height: 29px;
        text-align: center;
        color: #cccccc;
    } 
    .btn_box_wrap{
        padding: 0px 4%;
        width: 92%;
        position: absolute;
        bottom: 20px;
        left: 0px;
        z-index: 9999;
    }
    .btn_box_wrap .btn_box{
        padding:0px;
    }
    .btn_box_wrap .btn_box a{
        height: 50px;
        line-height: 50px;
        background-color: #FF5402;
        border:none;
        border-radius: 5px;
        -moz-box-shadow: 2px 2px 5px #FF5402,2px 2px 5px #FF5402,2px 2px 5px #FF5402,2px 2px 5px#FF5402;
        -webkit-box-shadow: 2px 2px 5px #FF5402,2px 2px 5px #FF5402,2px 2px 5px #FF5402,2px 2px 5px#FF5402;
        box-shadow:2px 2px 5px #FF5402,2px 2px 5px #FF5402,2px 2px 5px #FF5402,2px 2px 5px#FF5402;
    }  
    .search-content-show{
        background-color: white;
        margin-top: 2px;
        height: 200px;
        padding:0px;
        overflow-y:scroll;
     }
     .search-content-show .data-row{
        padding: 10px 15px 10px 34px;
        border-bottom: 1px solid #D9D9D9;
        font-size: 16px;
     }
      .search-content-show .data-row p{
        height: 24px;
     }
     .search-content-show .data-row .data-text{
        color:black;
     }
     .search-content-show .data-row .data-text-details{
        color:#888888;
        font-size: 14px;
     }
     .search-content-show .data-row .data-text .blue-text{
        color:#2861D7;
     }
</style>
<form action="{{ url('index/order/addComboOrder') }}" method="post" id="comboForm">
    <div id="container-main" class="bj_color order_wrap">
        <div class="weui_cells nomargintop">
            <div class="weui_cell weui_cell_select weui_select_after row_cell">
                <div class="weui_cell_hd">
                    选择套餐
                </div>
                <div class="weui_cell_bd weui_cell_primary right_select_box">
                    <select class="weui_select right_select" name="combo_id" as="combo_select">
                        {% for v in combo %}
                        <option value="{{v.id}}" price='{{v.price}}'>{{v.name}}</option>
                        {%endfor%}
                    </select>
                </div>
            </div>
        </div>
        <div class="data">
            <div class="tr th">
                <div class="td td-1 tr-title"><p>套餐类型</p></div>
                <div class="td td-2"><p>服务内容</p></div>
                <div class="td td-3"><p>价格</p></div>
            </div>
            {% for v in combo%}
            <div class="tr" as="combo_content">
                <div class="td td-1 tr-title"><p>{{v.name}}</p></div>
                <div class="td td-2">
                    {{v.content|raw}}
                </div>
                <div class="td td-3">
                    <p>{{v.price}}元</p>    
                </div>
            </div>
            {%endfor%}
        </div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">如何称呼您</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="client_name" class="weui_input" type="text" placeholder="请输入您的姓名"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">您的电话号码</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="client_phone" class="weui_input" type="tel" placeholder="请输入您的号码"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">预约的日期</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="carrydate" class="weui_input" type="date" placeholder="请输入您的搬运日期"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">从哪里出发</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="start_address" id="start_address" class="weui_input" type="text" placeholder="请输入起始地" onfocus="this.blur();" value=""/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">要搬到哪里</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="arrive_address" id="arrive_address" class="weui_input" type="text" placeholder="请输入目的地"/>
                </div>
            </div>
            <div class="weui_cell">
                <p>物品详细情况(备注)</p>
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea name="remark" class="weui_textarea" rows="3" placeholder="请描述物品，包裹数量"></textarea>
                </div>
            </div>
        </div>
        <div class="pay_info">
            <div class="sum_money">一共费用:<span class="red_font"  id="total_price">0.00</span>元 按{{deposit}}%的预约金额：<span class="red_font" id="deposit_price">0.00</span>元</div>
            <div class="sum_money">余款:<span class="red_font" id="spare_price">0.00</span>元 (根据实际情况或有浮动，订单完成后由搬运人员收取)</div>
            <div class="padding_box">
                选择发票: <label class="radio-padding">
                    <input type="radio" name="is_bill" id="Radio1" value="1" checked> 是
                </label>
                <label class="">
                    <input type="radio" name="is_bill" id="Radio2" value="0"> 否
                </label>
                <p>提示：需要填写发票。备注提醒用户填写后无法更改。</p>
            </div>
        </div>
        <div class="btn_box">
            <a class="weui_btn submit_btn" href="javascript:" id="submit">下单</a>
        </div>
    </div>
</form>

<!-- map-->
<div id="container-map" class="bj_color" style="display:none;">
    <div id="map_box">
        <div class="am-search am-input-autoclear">
            <div class="am-search-input" >
                <div class="am-search-icon"><i class="am-icon"></i></div>
                <input class="am-search-value" type="text" id="search-map" placeholder="按此输入起点" value="">
                <div class="am-search-clear" id="am-search-clear"><i class="am-icon-clear"></i></div>
                <div class="am-search-local">
                    <p>广州市</p>
                </div>
            </div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            <div class="search-content-show" style="display:none;" id="infolist">
                <div class="data-row"><p class="data-text"><span class="blue-text">华景</span>新城</p></div>
                <div class="data-row"><p class="data-text"><span class="blue-text">华景</span>新城华港商务大厦</p></div>
                <div class="data-row">
                     <p class="data-text"><span class="blue-text">华景</span>新城华港商务大厦</p>
                     <p class="data-text-details">中山大道西293号</p>
                </div>
                <div class="data-row">
                     <p class="data-text"><span class="blue-text">华景</span>新城华港商务大厦</p>
                     <p class="data-text-details">中山大道西293号</p>
                </div>
                <div class="data-row">
                     <p class="data-text"><span class="blue-text">华景</span>新城华港商务大厦</p>
                     <p class="data-text-details">中山大道西293号</p>
                </div>
            </div>        
            
        </div>

        <div class="btn_box_wrap">
            <div class="btn_box">
                <a id="comfirm-map" class="weui_btn submit_btn" href="javascript:" >确认起点</a>
            </div>
        </div>  
        <div id="l-map">  
        </div>
    </div> 
</div>  <!-- endmap-->

{% endblock %}
{% block script %} 
<script src="{{config['application']['site']['assetsUri']}}front/js/jquery.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}front/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WaBKpqzN9rnCRfECGUsEKrIK"></script>
<script>
//var winHeight;
// var Height;
// if (window.innerHeight)
// winHeight = window.innerHeight;
// else if ((document.body) && (document.body.clientHeight))
// winHeight = document.body.clientHeight;
// Height = winHeight + "px";   

 $("#l-map").height((window.innerHeight-50));
    
    
    
    
$(function () {
    var select = $("select[as='combo_select']");
    var deposit = parseInt("{{deposit}}");
    var total_price = $("#total_price");
    var deposit_price = $("#deposit_price");

    var change_combo = function () {
        var option = select.find("option:selected");
        var index = select.find("option").index(option);
        var price = option.attr('price');
        $("div[as='combo_content']").each(function () {
            if (($(this).index() - 1) == index) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        var rate = Math.ceil(price * (deposit / 100));
        total_price.text(price);
        deposit_price.text(rate);
    };
    change_combo();
    select.change(function () {
        change_combo();
    });

    $('#submit').click(function () {
        $('form').submit();
    });

    String.prototype.replaceAll = function (str1,str2){
        var str = this; 
        var result = str.replace(eval("/"+str1+"/gi"),str2);
        return result;
    };

    // 手机号码验证
    jQuery.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

    jQuery.validator.methods.compareDate = function(value, element) {
        //var startDate = jQuery(param).val() + ":00";补全yyyy-MM-dd HH:mm:ss格式
        //value = value + ":00";

        var startDate = value;
        var date1 = new Date(Date.parse(startDate.replaceAll("-", "/")));
        var today  = new Date();
        return date1 >= today;
    };

    jQuery.validator.methods.maxDate = function(value, element) {
        var startDate = value;
        var date1 = new Date(Date.parse(startDate.replaceAll("-", "/")));
            date1 = date1.getTime();
        var today  = new Date();
            today = today.getTime();
            today  += (3600000*24*7);
        return date1 <= today;
    };

    $("form").validate({
        rules: {
            client_name: {
                required: true,
                maxlength: 10
            },
            client_phone: {
                required: true,
                isMobile: true
            },
            carrydate: {
                required: true,
                compareDate: true,
                maxDate: true
            },
            start_address: {
                required: true,
                maxlength: 50
            },
            driver_address: {
                required: true,
                maxlength: 50
            }
        },
        messages: {
            client_name: {
                required: '请输入您的姓名！',
                maxlength: '长度不能超过10个字符！'
            },
            client_phone: {
                required: '手机号码不能为空！',
                isMobile: '请正确填写您的手机号码！'
            },
            carrydate: {
                required: '请输入预约日期！',
                compareDate: "搬运日期必须大当前日期！",
                maxDate: '搬运日期不能大于一周后！'
            },
            start_address: {
                required: '请输入起始地！',
                maxlength: '不能超过50个字符！'
            },
            driver_address: {
                required: '请输入目的地！',
                maxlength: '不能超过50个字符！'
            }
        }
    });


    $("#start_address").click(function () {
        map_switch();
    });
    
    $("#comfirm-map").click(function(){
        main_switch();
        $("#start_address").val($("#search-map").val());
    });
    
//    $("#search-map").change(function(){
//        var keyword = $(this).val();
//        alert(keyword);
//        search(keyword);
//    });
    
    var map_switch = function () {
        $("#container-map").show();
        $('#container-main').hide();
        map.centerAndZoom(point, 15);
        //navigator.geolocation.getCurrentPosition(translatePoint); //定位
        //geoCtrl.location();
    };
    
    var main_switch = function () {
        $('#container-map').hide();
        $('#container-main').show();
       // navigator.geolocation.getCurrentPosition(translatePoint); //定位 
    };
    

//    $("#l-map").click(function(){
//        infolistobj.hide();  
//    });

    //初始化地图 
    map = new BMap.Map("l-map");  
    var opts = {offset: new BMap.Size(20, 100)};   
    map.addControl(new BMap.NavigationControl(opts));
    var point = new BMap.Point(113.2718, 23.131);//定义一个中心点坐标
    map.centerAndZoom(point, 15);
    //map.addOverlay(new BMap.Marker(new BMap.Point()));
    // 添加定位控件
    var geoCtrl = new BMap.GeolocationControl({
        showAddressBar: false,
        offset: new BMap.Size(20, 100)
    });
//    var startIcon = new BMap.Icon('start.png',new BMap.Size(38, 41),{anchor: new BMap.Size(17, 32)});
//    map.addOverlay(new BMap.Marker(result.getStart().point,{icon:startIcon})); 
    var startIcon = new BMap.Icon("{{config['application']['site']['assetsUri']}}front/images/start.png",new BMap.Size(38, 41),{anchor: new BMap.Size(17, 32)});
//    var myGeo = new BMap.Geocoder();
    var marker = new BMap.Marker(point,{icon:startIcon});
    map.addOverlay(marker);
   // marker.setOffset( new BMap.Size(500, 400));
    map.addControl(geoCtrl);
    //map.panto(point);
    //定位成功
//    geoCtrl.addEventListener("locationSuccess", function (e) {
//       // map.clearOverlays();    //清除地图上所有覆盖物
//        var value = this.getAddressComponent();
//        $("#search-map").val(value.city+value.district+value.street+value.streetNumber);
//        marker.setPosition(e.point);  
//    });
    
    map.addEventListener('click',function(e){
         marker.setPosition(e.point);
         map.panTo(e.point); 

    });
    //拖拽事件中
//    map.addEventListener("dragging", function (e) {
//        //console.log(e);
//        var cp = map.getCenter();
//        marker.setPosition(new BMap.Point(cp.lng, cp.lat));
//        map.centerAndZoom(marker.getPosition(), map.getZoom());
//    });
//    map.addEventListener("dragend", function (e) {
//        //console.log(e);
//        var cp = map.getCenter();
//        marker.setPosition(new BMap.Point(cp.lng, cp.lat));
//        map.centerAndZoom(marker.getPosition(), map.getZoom());
//    });
//    map.addEventListener("dragstart", function (e) {
//        //console.log(e);
//        var cp = map.getCenter();
//        marker.setPosition(new BMap.Point(cp.lng, cp.lat));
//        map.centerAndZoom(marker.getPosition(), map.getZoom());
//    });
//    map.addEventListener("movestart", function (e) {
//        console.log(e.target.ef);
//        marker.setPosition(e.target.ef);
//        map.centerAndZoom(marker.getPosition(), map.getZoom());
//    });
//    map.addEventListener("moving", function (e) {
//        console.log(e.target.ef);
//        marker.setPosition(e.target.ef);
//        map.centerAndZoom(marker.getPosition(), map.getZoom());
//    });
//    map.addEventListener("moveend", function (e) {
//        console.log(e);
//        console.log(e.target.ef);
//        marker.setPosition(e.target.ef);
//        map.centerAndZoom(marker.getPosition(), map.getZoom());
//    });
//    
//    //拖拽事件结束
//    map.addEventListener("dragend", function (e) {
//        var cp = map.getCenter();
//        marker.setPosition(e.point);
//        //map.panTo(e.point);
//        myGeo.getLocation(e.point, function (result) {
//            if (result) {
//                console.log(result);
//                //	window.external.setaddress(result.address);//setarrea(result.address);//
//                //alert(point.lng + "  ddd " + point.lat);
//                //marker1.setPoint(new BMap.Point(cp.lng,cp.lat));        // 移动标注
//                marker.setPosition(e.point);
//                map.panTo(e.point);
//
//                //window.external.setlngandlat(cp.lng,cp.lat);
//            }
//        });
////        mkurl();
//    });
//    var infolistobj = $("#infolist");
//    var auto_switch = true;
//    //自动搜索
//    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
//            {"input" : "search-map"
//            ,"location" : map
//            ,'onSearchComplete':function(result){
//                ac.hide();
//                console.log(result);
//                if(result.getNumPois()>0 && auto_switch == true){
//                    var infolist = '';    
//                    for(var i=0;i<result.getNumPois();i++){
//                        var poi = result.getPoi(i);
//                        var str = poi.business;
//                        var keyword = result.keyword;
//                        infolist += '<div class="data-row" value="'+poi.province+poi.city+poi.district+poi.street+poi.business+'"  >';
//                        infolist += '<p class="data-text"><span class="blue-text">'+keyword+'</span>'+str.replace(keyword,'')+'</p>';
//                        infolist += '<p class="data-text-details">'+poi.city+poi.district+poi.street+poi.streetNumber+'</p>';
//                        infolist += '</div>';
//                    }
//                    
//                    infolistobj.html(infolist).show();
//                    infolistobj.find('.data-row').click(function(){
//                        infolistobj.hide();
//                        myValue = $(this).attr('value');
//                        $("#search-map").val(myValue);
//                        auto_switch = false;
//                        setPlace();
//                    });
//                }else{
//                    auto_switch = true;
//                }
//            }
//
//    });
    
    
//    ac.addEventListener("onhighlight",function(e){
//	var str = "";
//        var _value = e.fromitem.value;
//        var value = "";
//        if (e.fromitem.index > -1) {
//                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
//        }    
//        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
//
//        value = "";
//        if (e.toitem.index > -1) {
//                _value = e.toitem.value;
//                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
//        }    
//        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
//        //G("searchResultPanel").innerHTML = str;
//        $("#searchResultPanel").html(str);
//    });
//    
//    var myValue;
//    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
//    var _value = e.item.value;
//            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
//            $("searchResultPanel").html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
//            setPlace();
//            $("#search-map").blur();
//    });
//    
//    function setPlace(){
//            map.clearOverlays();    //清除地图上所有覆盖物
//            function myFun(){
//                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
//                    map.centerAndZoom(pp, 18);
//                    map.addOverlay(new BMap.Marker(pp));    //添加标注 
//            }
//            var local = new BMap.LocalSearch(map, { //智能搜索
//              onSearchComplete: myFun
//            });
//            local.search(myValue);
//    }
    
    
    //自动搜索 end
     
//    var local  = new BMap.LocalSearch(map,{
//        renderOptions:{map:map}
//    });
//    function search(keyword){
//
//        local.setSearchCompleteCallback(function(rs){
//            map.clearOverlays();
//            console.log(rs);
//            if(local.getStatus() == BMAP_STATUS_SUCCESS){
//                var infolist = ''
//                for(var j=0;j<rs.getCurrentNumPois();j++){
//                    var poi = rs.getPoi(j);
//                    infolist += '<div class="data-row" lat="'+poi.lat+'" lng="'+poi.lng+'">';
//                    infolist += '<p class="data-text"><span class="blue-text">'+poi.title+'</span>新城华港商务大厦</p>';
//                    infolist += '<p class="data-text-details">'+poi.address+'</p>';
//                    infolist += '</div>';
//                }
//                
//                var infolistobj = $("#infolist");
//                infolistobj.empty().html(infolist).show();
//                infolistobj.find('.data-row').click(function(){
//                    infolistobj.hide();
//                    var lat = $(this).attr('lat');
//                    var lng = $(this).attr('lng');
//                });
//            }
//        });
//       
//    }
    
    

//    //地图
//    function translatePoint(position) {
//        var currentLat = position.coords.latitude;
//        var currentLon = position.coords.longitude;
//        var gpsPoint = new BMap.Point(currentLon, currentLat);
//        BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标 
//    }
//    
//    function initMap(point) {
//        //初始化地图 
//        map = new BMap.Map("l-map");
//        map.enableScrollWheelZoom();
//        map.addControl(new BMap.NavigationControl());
//        map.addControl(new BMap.GeolocationControl());
//        map.centerAndZoom(point, 15);
//        map.addOverlay(new BMap.Marker(point));
//
//        // 添加定位控件
//        var geoCtrl = new BMap.GeolocationControl({
//            showAddressBar: false
//        });
//
//         //监听定位成功事件
//        geoCtrl.addEventListener("locationSuccess", function (e) {
//
//            var value = this.getAddressComponent();
//            for (k in value) {
//                alert(value[k]);
//            }
//        });
//        
//        //监听定位失败事件
//        geoCtrl.addEventListener("locationError", function (e) {
//            alert('监听定位失败事件');
//        });
//
//
//        map.addControl(geoCtrl);
//    }


    // 定位
//    var geolocation = new BMap.Geolocation();
//    geolocation.getCurrentPosition(function (r) {
//        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
//            var mk = new BMap.Marker(r.point);
//            map.addOverlay(mk);
//            map.panTo(r.point);
//            var geoc = new BMap.Geocoder();
//            geoc.getLocation(r.point, function (rs) {
//                var addComp = rs.addressComponents;
//                var a = addComp.province + addComp.city + addComp.district + addComp.street;
//                gain("currentPlace").value = a;
//
//            });
//        } else {
//            alert('failed' + this.getStatus());
//        }
//    }, {enableHighAccuracy: true});





});



</script>
{% endblock %}